<template>
    <div class="register">
        <div class="header">
            <div class="header_box">
                <div class="header_logo">
                    邀请制消费返现系统
                </div>
                <router-link  to="/home">
                    <div class="home">首页</div>
                </router-link>
                <div style="clear:both"></div>
            </div>
        </div>
        <div class="register_tit_box">
            <div class="regis_tit">
                <p class="title_log">欢迎注册返现系统账号</p>
                <p class="title_small">准备开启你的返现之旅</p>
            </div>
        </div>
        <div class="regis_form">
            <p class="form_title">
                已有返现系统账号？
                <router-link to="/login">
                    <span>立即登录</span>
                </router-link>
            </p>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="el_form">
                <el-form-item label="姓名" prop="user_name">
                    <el-input v-model="ruleForm.user_name" placeholder="请输入姓名"></el-input>
                </el-form-item>

                <el-form-item label="手机号">
                  <el-select v-model="area" placeholder="请选择" style="width:80px">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.area">
                    </el-option>
                  </el-select>
                  <el-input v-model="ruleForm.phone_number" placeholder="请输入手机号" style="width:330px;"></el-input>
                </el-form-item>

                <el-form-item label="验证码" prop="phone_code">
                    <el-input v-model="ruleForm.phone_code" placeholder="请输入验证码" style="width:295px;"></el-input>
                    <el-button type="info">获取验证码</el-button>
                </el-form-item>

                <el-form-item label="证件类型" prop="id_number">
                  <el-select v-model="papers" placeholder="请选择证件类型" style="width:100%">
                    <el-option
                      v-for="item in id_number"
                      :key="item.value"
                      :label="item.label"
                      :value="item.papers">
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="证件号码" prop="phone_number">
                    <el-input v-model="ruleForm.phone_number" placeholder="请输入证件号码"></el-input>
                </el-form-item>

                <el-form-item label="邀请人ID" prop="phone_number">
                    <el-input v-model="ruleForm.phone_number" placeholder="请输入邀请人ID"></el-input>
                </el-form-item>

                <el-form-item label="登陆密码" prop="phone_number">
                    <el-input v-model="ruleForm.phone_number" placeholder="请输入登陆密码"></el-input>
                </el-form-item>

                <el-form-item label="确认登陆密码" prop="phone_number">
                    <el-input v-model="ruleForm.phone_number" placeholder="请确认登陆密码"></el-input>
                </el-form-item>

                <el-form-item label="安全密码" prop="phone_number">
                    <el-input v-model="ruleForm.phone_number" placeholder="请输入安全密码"></el-input>
                </el-form-item>

                <el-form-item label="确认安全密码" prop="phone_number">
                    <el-input v-model="ruleForm.phone_number" placeholder="请确认安全密码"></el-input>
                </el-form-item>

                <el-form-item label="">
                    <el-button class="btn" @click="registerHandle('ruleForm')">同意条款并注册</el-button>
                </el-form-item>

                <el-form-item label="" class="btn_check">
                    <el-checkbox ></el-checkbox>《返现系统网站服务条款》|《法律声明和隐私权政策》
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data() {
      return {
        //手机区号列表
        options: [
          {value: '1', label: '+86'},
          {value: '2', label: '+87'}
        ],
        area : '+86', // 默认+86
        // 证件类型列表
        id_number: [
          {value: '1', label: '身份证'},
          {value: '2', label: '护照'}
        ],
        papers: '身份证',
        // 集合
        ruleForm: {
          user_name: '',
          phone_number:'',
          phone_code: ''
        },
        rules: {
          user_name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          phone_number: [
            { required: true, message: '请输入电话号码', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      registerHandle(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.register();
          }
        });
      },
      // 注册
      register() {
        var params = new FormData();
        params.append("name", this.ruleForm.user_name)
        params.append("phone_number", this.ruleForm.phone_number)
        params.append("sms_code", this.ruleForm.phone_code)
        params.append("password")
        params.append("check_password")
        params.append("pay_password")
        params.append("invite")
        params.append("cert_type")
        params.append("id_number")
        params.append("alipay")
        params.append("weixin")
        params.append("cvb")
        axios.post('api/member/api/register/', params).then((res) =>{
          console.log(res)
        })
      },
      // 发送手机验证码
      sendMessage() {
        console.log(123)
      }
    }
  }
</script>

<style scoped lang="scss">
.register {
  .header {
    height: 60px;
    background-image: url("../../assets/img/register.jpg");
    background-size: 100% 100%;
    .header_box {
      width: 1215px;
      height: 60px;
      line-height: 60px;
      margin: 0 auto;
      .header_logo {
        float: left;
        font-size: 22px;
        color: #ffffff;
        letter-spacing: 0;
        line-height: 22px;
        font-weight: 600;
        text-indent: 40px;
        line-height: 60px;
      }
      .home {
        float: right;
        font-size: 14px;
        color: #ffffff;
        letter-spacing: 0;
        line-height: 14px;
        line-height: 60px;
      }
    }
  }
  .register_tit_box {
    height: 250px;
    background-image: url("../../assets/img/register2.jpg");
    background-size: 100% 100%;
    .title_log {
      font-size: 30px;
      color: #ffffff;
      letter-spacing: 0;
      line-height: 30px;
      font-weight: 600;
      text-align: center;
      line-height: 105px;
    }
    .title_small {
      font-size: 16px;
      color: #ffffff;
      letter-spacing: 0;
      line-height: 16px;
      text-align: center;
    }
  }
  .regis_form {
    width: 1345px;
    margin: 0 auto;
    background: #ffffff;
    margin-top: -66px;
    border-radius: 8px;
    padding-bottom: 1px;
    a:-webkit-any-link {
      text-decoration: none !important;
    }
    .form_title {
      font-size: 14px;
      color: #606266;
      letter-spacing: 0;
      line-height: 35px;
      margin-left: 800px;
      span {
        color: #ff6606;
      }
    }
    .el_form {
      width: 545px;
      margin: 50px auto;
      .btn {
        width: 100%;
        background: #ff6606;
        border-radius: 4px;
        font-size: 14px;
        color: #ffffff;
      }
      .btn_check {
        font-size: 12px;
        color: #606266;
      }
    }
  }
}
</style>
